<template>
    <page-frame>
        <div class="financial-alloction">
            <div class="toptitle">
              <div class="left">费用配置</div>
              <div class="right">
                <div class="btns"v-if="active == 0">
                  <el-button @click="addItem" class="lightGreenBtn">新增项目</el-button>
                </div>
                <div class="btns"v-else="active!= 0">
                  <el-button  @click="addType" class="lightGreenBtn">新增类型</el-button>
                </div>
              </div>
            </div>
          <div class="borderT"></div>
            <div class="timeChange">
                <div style="text-align:center;vertical-align:top;display:inline-block; margin-bottom: 15px;">
                  <el-button
                    @click="toggle(index,tab.id)"
                    v-for="(tab,index) in itemList"
                    :class="{lightGreenBtn:active===index}"
                    style="width: 100px">
                    {{tab.name}}
                  </el-button>
                </div>
                <div v-if="active == 0" class="input">
                  <el-row>
                    <el-col :span="6">
                     <el-input v-model="expenseItems.itemName" @keyup.enter.native="search" placeholder="请输入费用项目名称"></el-input>
                    </el-col>
                    <el-col :span="2">
                      <el-button class="query lightGreenBtn" @click="search">搜索</el-button>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="active == 1" class="input">
                  <el-row>
                    <el-col :span="6">
                      <el-input v-model="expenseTypes.typeName" @keyup.enter.native="search" placeholder="请输入费用类型名称"></el-input>
                    </el-col>
                    <el-col :span="2">
                      <el-button class="query lightGreenBtn" @click="search">搜索</el-button>
                    </el-col>
                  </el-row>
                </div>

            </div>
            <div v-show="active == 0">
                <el-table
                    :data="tableDataItem"
                    border
                    @row-dblclick="handleRowDbClick">
                    <el-table-column
                      prop="itemName"
                      label="费用项目"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="typeName"
                      label="费用类型"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格"
                      width="">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="">
                      <template scope="scope">
                        <el-button type="text" size="small" @click.stop="edit1(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" v-if="scope.row.sys==0" @click.stop="del1(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="active == 1">
                <el-table
                    :data="tableDataType"
                    border
                    @row-dblclick="handleRowDbClick2"
                    style="width: 100%;">
                    <el-table-column
                      prop="typeName"
                      label="费用名称"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="typeNoName"
                      label="费用所属类型"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="deductionName"
                      label="扣费规则"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="refundName"
                      label="退费规则"
                      width="">
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      width="">
                      <template scope="scope">
                        <el-button type="text" size="small" @click.stop="edit2(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" v-if="scope.row.sys==0" @click.stop="del2(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangePage"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </div>

          <!--添加费用类型弹框-->
          <div class="feeTypeBox" v-show="serviceRecord">
            <div style="position:relative;">
              <div class="dialog-title-teambed" v-model="dialogTitleType">
                {{dialogTitleType}}
              </div>
              <div style="padding: 15px 20px 0 45px;">
                <el-form :model="serviceRecordForm" ref="serviceRecordForm" :rules="typeRules">
                  <el-form-item label="费用类型" prop="typeName" :label-width="formLabelWidth">
                    <el-input
                      v-model="serviceRecordForm.typeName"
                      style="width:80%!important"
                      :disabled="feeType"
                      placeholder="请输入费用类型名称"
                      auto-complete="off">
                    </el-input>
                  </el-form-item>
                  <!--<el-form-item label="所属费用类型" prop="typeNo" :label-width="formLabelWidth">-->
                  <!--<el-select v-model="serviceRecordForm.typeNo" :disabled="feeType" style="width:80%!important" placeholder="请选择">-->
                  <!--<el-option-->
                  <!--v-for="item in typeNoOptions"-->
                  <!--:key="item.value"-->
                  <!--:label="item.label"-->
                  <!--:value="item.value">-->
                  <!--</el-option>-->
                  <!--</el-select>-->
                  <!--</el-form-item>-->
                  <el-form-item label="计费方式" prop="unit" label-width="formLabelWidth">
                    <el-radio-group v-model="serviceRecordForm.unit" @change="selectUnit">
                      <div class="radioGap">
                        <el-radio :label="0" :disabled="feeType">按月计费（如床位费、餐费等）
                        </el-radio>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="1" :disabled="feeType">一次性收费（如押金）
                        </el-radio>
                      </div>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="扣费规则" prop="deduction" :label-width="formLabelWidth">
                    <el-radio-group v-if="serviceRecordForm" style="display: block"  v-model="serviceRecordForm.deduction">
                      <div class="radioGap">
                        <el-radio :label="0" :disabled="feeType||serviceRecordForm.unit==1">每月固定日期扣除</el-radio>
                      </div>
                      <div style="margin:5px 0 0 22px;" v-if="serviceRecordForm.deduction == 0">
                        <span style="font-size:14px!important;">每月</span>
                        <el-input
                          v-model="serviceRecordForm.day"
                          style="width:50px!important;"
                          :disabled="feeType"
                          auto-complete="off">
                        </el-input>
                        <span style="font-size:14px!important;">日</span>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="1" :disabled="feeType||serviceRecordForm.unit==1">根据入住日期按月扣除</el-radio>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="2" :disabled="feeType||serviceRecordForm.unit==1">根据入住日期按周期整扣</el-radio>
                      </div>
                      <div style="margin:10px 0 0 22px;" v-if="serviceRecordForm.deduction == 2||serviceRecordForm.deduction == 3||serviceRecordForm.deduction == 4">
                        <el-row>
                          <el-radio :label="2" :disabled="feeType">扣三个月</el-radio>
                          <el-radio :label="3" :disabled="feeType">扣半年</el-radio>
                          <el-radio :label="4" :disabled="feeType">扣整年</el-radio>
                        </el-row>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="5" :disabled="feeType">业务发生时按实际情况扣除</el-radio>
                      </div>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="退费规则" prop="refund" :label-width="formLabelWidth">
                    <el-radio-group v-if="serviceRecordForm" v-model="serviceRecordForm.refund">
                      <div class="radioGap">
                        <el-radio :label="0" :disabled="feeType">按日均价格折算退费金额</el-radio>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="1" :disabled="feeType">根据账户余额足额退还</el-radio>
                      </div>
                      <div class="radioGap">
                        <el-radio :label="2" :disabled="feeType">扣费周期内不退费</el-radio>
                      </div>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
                <div style="margin:20px;text-align:right;">
                  <el-button v-if="!feeType" @click="serviceRecord = false,modal=false">取 消</el-button>
                  <el-button type="primary" v-if="!feeType" @click="serviceRecordBtn('serviceRecordForm')">确 定</el-button>
                  <el-button type="primary" v-if="feeType" @click="serviceRecord = false,modal=false">确 定</el-button>
                </div>
              </div>
            </div>
          </div>


          <!--新增费用项目弹框-->
          <div class="bed" v-show="newPriject">
            <div style="position:relative;">
              <div class="dialog-title-teambed" v-model="dialogTitleItem">
                {{dialogTitleItem}}
              </div>
              <div style="padding: 15px 20px 0 45px;">
                <el-form label-position="right" label-width="80px" :model="ruleForm" ref="ruleForm" :rules="rules">
                  <el-form-item label="费用类型" prop="typeId">
                    <el-select v-model="ruleForm.typeId" @change="selectChange" :disabled="feeItem" placeholder="请选择费用类型" style="width:80%!important">
                      <el-option
                        v-for="item in ExpenseTypeOptions"
                        :key="item.typeNo"
                        :label="item.typeName"
                        :value="item.typeId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="房间类型" v-if="isBed" prop="rmStdId">
                    <el-select v-model="ruleForm.rmStdId" :disabled="feeItem" placeholder="请选择房间标准" style="width:80%!important">
                      <el-option
                        v-for="item in roomTypeOptions"
                        :key="item.rmStdId"
                        :label="item.rmStdName"
                        :value="item.rmStdId">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="费用项目" prop="itemName">
                    <el-input v-model="ruleForm.itemName" :disabled="feeItem" placeholder="请在此输入具体收费项目" style="width:80%!important"></el-input>
                  </el-form-item>
                  <el-form-item label="项目价格" prop="price" :label-width="formLabelWidth">
                    <el-row>
                      <el-col>
                        <el-input
                          v-model="ruleForm.price"
                          auto-complete="off"
                          style="width:80%!important"
                          :disabled="feeItem"
                          placeholder="请在此输入项目收费价格">
                        </el-input>
                        <span v-if="unitStatus">元/月</span>
                        <span v-if="!unitStatus">元</span>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
                <div style="margin:20px;text-align:right;">
                  <el-button v-if="!feeItem" @click="newPriject = false,modal = false">取 消</el-button>
                  <el-button type="primary" v-if="!feeItem" @click="newPrijectBtn('ruleForm')">确 定</el-button>
                  <el-button type="primary" v-if="feeItem" @click="newPriject = false,modal = false">确 定</el-button>
                </div>
              </div>
            </div>
          </div>
          <!--遮罩层-->
          <div class="v-modal" style="z-index:9" v-show="modal" @click="modal=false,newPriject=false,serviceRecord=false"></div>


        </div>
    </page-frame>
</template>

<script>
    import financeAllocationApi from '../../service/finance/financeAllocationApi';
    export default {
        data () {
          return {
            modal:false,
            dialogTitleType:'新增费用类型',
            dialogTitleItem:'新增费用项目',
            feeType:false,
            feeItem:false,
            isAddType:false,
            isAddItem:false,
            isBed:false,
            unitStatus:false,
            typeId:null,
            expenseTypes:{
              "typeName": ""
            },
            expenseItems:{
              "itemName": ""
            },
            formLabelWidth:'80px',
            ExpenseTypeOptions:[],//费用类型
            roomTypeOptions:[],//房间类型
            ruleForm:{//费用项目
              rmStdId:null,//房间类型id
              typeId:null,//费用类型
              itemName:"",//费用项目
              sys: 0,
              price:null,//项目价格
            },
            rules:{
              typeId: [
                {type:'number', required: true, message: '请选择费用类型', trigger: 'change' },
              ],
              itemName: [
                {required: true, message: '请填写费用项目', trigger: 'blur' },
              ],
              price: [
                {required: true, message: '请填写项目价格', trigger: 'blur' },
              ]
            },
            editRuleForm:{//费用项目
              itemId: 0,
              rmStdId:null,//房间类型id
              typeId:null,//费用类型
              itemName:"",//费用项目
              sys: 0,
              price:"",//项目价格
            },
            serviceRecord:false,
            newPriject:false,
            serviceRecordForm:{//费用类型
              sys: 0,
              typeName:"",//费用类型
              typeNo:4,//所属服务类型
              day:"", //固定扣费日期
              unit:"0",//计费方式0：按月计费 1：固定金额
              refund :"1",//退费规则 0:按日均价格折算退费金额 1:根据账户余额足额退还 2:扣费周期内不退 ,
              deduction :"1",//扣费规则 0:每月固定日期扣除 1:根据入住日期按月扣除 2:根据入住日期按周期整扣3个月 3:根据入住日期按周期整扣6个月 4:根据入住日期按周期整扣 1年 5:业务发生时按实际情况扣除 ,
            },
            typeRules:{
              typeName:[
                {required: true, message: '请填写费用类型名称', trigger: 'blur' },
              ],
              typeNo:[
                {type:'number',required: true, message: '请填写所属费用类型', trigger: 'change' },
              ],
              unit:[
                {type:'number',required: true, message: '请选择计费方式', trigger: 'change' },
              ],
              deduction:[
                {type:'number',required: true, message: '请选择扣费规则', trigger: 'change' },
              ],
              refund:[
                {type:'number',required: true, message: '请选择退费规则', trigger: 'change' },
              ],
            },
            editFeeTypes:{
              "day": "",
              "deduction": 0,
              "refund": 0,
              "typeId": null,
              "typeName": "",
              "typeNo": null,
              "unit": 0,
            },
            itemList: [{
              id: 0,
              name: "费用项目",
            }, {
              id: 1,
              name: "费用类型",
            }],
            typeNoOptions:[{
              value:0,
              label:'床位费'
            },{
              value:1,
              label:'餐饮费'
            },{
              value:2,
              label:'护理费'
            },{
              value:3,
              label:'押金'
            },{
              value:4,
              label:'其它费用'
            }],
            active: 0,
            tableDataItem:[],
            tableDataType: [],
            total: 0,
            currentPage: 1,
          }
        },
        methods: {
          init() {
            //加载费用类型
            this.getAllFeeTypes();
            //默认初始化显示费用项目
            this.loadTableDataItem(1);
            //加载房间标准
            this.getRoomType();
          },
          /**
           * 计费方式改变时
           */
          selectUnit(){
            if(this.serviceRecordForm.unit == 1){//一次性收费
              this.serviceRecordForm.deduction = 5;
            }else{

            }
          },
          /**
           * 搜索
           */
          search(){
            if(this.active==0){
              this.loadTableDataItem(1);
            }else{
              this.loadTableDataType(1);
            }
          },
          selectChange(val){
            //先清空房间类型的数据rmStdId
            if(this.isAddItem){
              this.ruleForm.rmStdId = null;
            }else{

            }
            for(let i=0;i<this.ExpenseTypeOptions.length;i++){
              if(this.ExpenseTypeOptions[i].typeId==val){
                if(this.ExpenseTypeOptions[i].unit==0){//元/月
                  this.unitStatus = true;
                }else if(this.ExpenseTypeOptions[i].unit==1){//元
                  this.unitStatus = false;
                }
                if(this.ExpenseTypeOptions[i].typeNo==0){//如果是床位费
                  this.isBed = true;
                  return ;
                }else{
                  this.isBed = false;
                }
              }
            }
          },
          /**
           * 新增项目
           */
          addItem(){
            this.newPriject=true;
            this.isAddItem = true;
            this.feeItem = false;
            this.modal = true;
            this.dialogTitleItem = '新增费用项目';
            this.clearItemData();
          },
          /**
           * 获取所有费用类型
           */
          getAllFeeTypes(){
            let self = this;
            financeAllocationApi.getAllAccountTypes().then(
              (response)=>{
                self.ExpenseTypeOptions = response.data.data;
              }
            );
          },
          /**
           * 获取房间类型
           */
          getRoomType(){
            let self = this;
            //传入的参数1代表卧室
            financeAllocationApi.getAllRoomTypes(1).then(
              (response)=>{
                self.roomTypeOptions = response.data.data;
              }
            );
          },
          /**
           * 新增类型
           */
          addType(){
            let self = this;
            self.serviceRecord=true;
            self.modal = true;
            self.isAddType = true;
            self.feeType = false;
            self.dialogTitleType = '新增费用类型';
            self.clearTypeData();
          },
          /**
           * 清空新增类型弹框数据
           */
          clearTypeData(){
            this.$refs['serviceRecordForm'].resetFields()
          },
          /**
           * 清空新增费用项目弹框数据
           */
          clearItemData(){
            this.$refs['ruleForm'].resetFields()
          },
          /**
           * 加载页面数据-费用项目
           */
          loadTableDataItem(pageNum){
            let self = this;
            //加载费用类型
            self.getAllFeeTypes();
            financeAllocationApi.getExpenseItems(10,pageNum,self.expenseItems).then(
              (response)=>{
                self.tableDataItem = response.data.data.list;
                self.total = response.data.data.total;
              }
            );
          },
          /**
           * 加载页面数据-费用类型
           */
          loadTableDataType(pageNum){
            let self = this;
            financeAllocationApi.getExpenseTypes(10,pageNum,self.expenseTypes).then(
              (response)=>{
                self.tableDataType = response.data.data.list;
                self.total = response.data.data.total;
                for(let i=0;i<self.tableDataType.length;i++){
                  //费用类型
                  if(self.tableDataType[i].typeNo==0){
                    self.tableDataType[i].typeNoName = '床位费';
                  }else if(self.tableDataType[i].typeNo==1){
                    self.tableDataType[i].typeNoName = '餐饮费';
                  }else if(self.tableDataType[i].typeNo==2){
                    self.tableDataType[i].typeNoName = '护理费';
                  }else if(self.tableDataType[i].typeNo==3){
                    self.tableDataType[i].typeNoName = '押金';
                  }else{
                    self.tableDataType[i].typeNoName = '其它费用';
                  }

                  //扣费规则
                  if(self.tableDataType[i].deduction==0){
                    self.tableDataType[i].deductionName = '每月固定日期扣除';
                  }else if(self.tableDataType[i].deduction==1){
                    self.tableDataType[i].deductionName = '根据入住日期按月扣除';
                  }else if(self.tableDataType[i].deduction==2){
                    self.tableDataType[i].deductionName = '根据入住日期按周期整扣3个月';
                  }else if(self.tableDataType[i].deduction==3){
                    self.tableDataType[i].deductionName = '根据入住日期按周期整扣6个月';
                  }else if(self.tableDataType[i].deduction==4){
                    self.tableDataType[i].deductionName = '根据入住日期按周期整扣 1年';
                  }else if(self.tableDataType[i].deduction==5){
                    self.tableDataType[i].deductionName = '业务发生时按实际情况扣除';
                  }

                  //退费规则
                  if(self.tableDataType[i].refund==0){
                    self.tableDataType[i].refundName = '按日均价格折算退费金额';
                  }else if(self.tableDataType[i].refund==1){
                    self.tableDataType[i].refundName = '根据账户余额足额退还';
                  }else if(self.tableDataType[i].refund==2){
                    self.tableDataType[i].refundName = '扣费周期内不退';
                  }
                }
              }
            );
          },
          /**
           * tab切换
           */
          toggle(index, id){
            this.active = id;
            if(id==0){//费用项目
              this.expenseTypes.typeName = '';
              this.loadTableDataItem(1);
            }else if(id==1){//费用类型
              this.expenseItems.itemName = '';
              this.loadTableDataType(1);
            }
          },
          /**
           * 编辑-项目
           */
          edit1(row){
            this.newPriject=true;
            this.modal = true;
            this.isAddItem = false;
            this.feeItem = false;
            this.dialogTitleItem = '编辑费用项目';
            this.ruleForm.itemId = row.itemId;
            this.ruleForm.rmStdId = row.rmStdId;
            this.ruleForm.typeId = row.typeId;
            this.ruleForm.itemName = row.itemName;
            this.ruleForm.sys = row.sys;
            this.ruleForm.price = row.price+'';
            this.selectChange(row.typeId);
          },
          /**
           * 编辑-类型
           */
          edit2(row){
            this.serviceRecord=true;
            this.modal = true;
            this.isAddType = false;
            this.feeType = false;
            this.dialogTitleType = '编辑费用类型';
            this.typeId = row.typeId;
            this.serviceRecordForm.typeName = row.typeName;
            this.editFeeTypes.typeNo = row.typeNo;
            this.serviceRecordForm.unit = row.unit;
            this.serviceRecordForm.refund = row.refund;
            this.serviceRecordForm.deduction = row.deduction;
            this.serviceRecordForm.day = row.day;
          },
          /**
           * 删除-项目
           */
          del1(row){
            let self = this;
            self.$confirm('继续点击「确定」，将删除该条内容及其所有关联项目', '删除', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              financeAllocationApi.delFeeItem(row.itemId).then(
                (response)=>{
                  self.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  self.currentPage = 1;
                  self.loadTableDataItem(1);
                }
              );
            }).catch(() => {
              self.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          /**
           * 删除-类型
           */
          del2(row){
            let self = this;
            self.$confirm('继续点击「确定」，将删除该条内容及其所有关联项目', '删除', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              financeAllocationApi.delFeeType(row.typeId).then(
                (response)=>{
                  self.$message({
                    type: 'success',
                    message: '删除成功'
                  });
                  self.currentPage = 1;
                  self.loadTableDataType(1);
                },
                (response)=>{
                  self.$message({
                    type: 'error',
                    message: '删除失败'
                  });
                }
              );
            }).catch(() => {
              self.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          /**
           * 新增/编辑（费用类型）
           */
          serviceRecordBtn(formName){
            let self = this;
            self.$refs[formName].validate((valid) => {
              if (valid) {
                if(self.isAddType){//新增
                  financeAllocationApi.saveAccountExpenseType(self.serviceRecordForm).then(
                    (response)=>{
                    self.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  self.serviceRecord = false;
                  self.modal = false;
                  self.currentPage = 1;
                  self.loadTableDataType(1);
                },
                  (response)=>{
                    self.$message({
                      type: 'error',
                      message: '新增失败'
                    });
                  }
                );
                }else{//编辑提交
                  self.editFeeTypes.typeId = self.typeId;
                  self.editFeeTypes.day = self.serviceRecordForm.day;
                  self.editFeeTypes.deduction = self.serviceRecordForm.deduction;
                  self.editFeeTypes.refund = self.serviceRecordForm.refund;
                  self.editFeeTypes.typeName = self.serviceRecordForm.typeName;
                  self.editFeeTypes.typeNo = self.editFeeTypes.typeNo;
                  self.editFeeTypes.unit = self.serviceRecordForm.unit;
                  financeAllocationApi.saveAccountExpenseType(self.editFeeTypes).then(
                    (response)=>{
                    self.$message({
                    type: 'success',
                    message: '编辑成功'
                  });
                  self.serviceRecord = false;
                  self.modal = false;
                  self.loadTableDataType(1);
                },
                  (response)=>{
                    self.$message({
                      type: 'success',
                      message: '编辑失败'
                    });
                  }
                );
                }
              } else {
                return false;
              }
            });
          },
          /**
           * 新增/编辑（费用项目）
           */
          newPrijectBtn(formName){
            let self = this;
            self.$refs[formName].validate((valid) => {
              if (valid) {
                if(self.isAddItem){//新增费用项目
                  financeAllocationApi.addAccountExpenseItem(self.ruleForm).then(
                    (response)=>{
                    self.$message({
                    type: 'success',
                    message: '新增成功!'
                  });
                  self.newPriject = false;
                  self.modal = false;
                  self.currentPage = 1;
                  self.loadTableDataItem(1);
                },
                  (response)=>{
                    self.$message({
                      type: 'error',
                      message: '新增失败!'
                    });
                  }
                );
                }else{//编辑费用项目
                  self.editRuleForm.itemId = self.ruleForm.itemId;
                  self.editRuleForm.rmStdId = self.ruleForm.rmStdId;
                  self.editRuleForm.typeId = self.ruleForm.typeId;
                  self.editRuleForm.itemName = self.ruleForm.itemName;
                  self.editRuleForm.sys = self.ruleForm.sys;
                  self.editRuleForm.price = self.ruleForm.price;
                  financeAllocationApi.addAccountExpenseItem(self.editRuleForm).then(
                    (response)=>{
                    self.$message({
                    type: 'success',
                    message: '编辑成功!'
                  });
                  self.newPriject = false;
                  self.modal = false;
                  self.loadTableDataItem(1);
                },
                  (response)=>{
                    self.$message({
                      type: 'error',
                      message: '编辑失败!'
                    });
                  }
                );
                }
              } else {
                return false;
              }
            });
          },
          /**
           * 双击费用项目行
           */
          handleRowDbClick(row){
            this.newPriject=true;
            this.feeItem = true;
            this.dialogTitleItem = '费用项目详情';
            this.ruleForm.itemId = row.itemId;
            this.ruleForm.rmStdId = row.rmStdId;
            this.ruleForm.typeId = row.typeId;
            this.ruleForm.itemName = row.itemName;
            this.ruleForm.sys = row.sys;
            this.ruleForm.price = row.price+'';
          },
          /**
           * 双击费用类型行
           */
          handleRowDbClick2(row){
            this.serviceRecord=true;
            this.feeType = true;
            this.dialogTitleType = '费用类型详情';
            this.typeId = row.typeId;
            this.serviceRecordForm.typeName = row.typeName;
            this.serviceRecordForm.typeNo = row.typeNo;
            this.serviceRecordForm.unit = row.unit;
            this.serviceRecordForm.refund = row.refund;
            this.serviceRecordForm.deduction = row.deduction;
            this.serviceRecordForm.day = row.day;
          },
          /**
           * 分页函数
           */
          handleSizeChange(val) {
//            console.log(`每页 ${val} 条`);
          },
          handleCurrentChangePage(val) {
            this.currentPage = val;
            if(this.active==0){
              this.loadTableDataItem(this.currentPage);
            }else if(this.active==1){
              this.loadTableDataType(this.currentPage);
            }
          },

        },

        mounted: function () {
          this.init();
        },
    }
</script>
<style>
   .financial-alloction .timeChange {
      width: 100%;
    }

   .financial-alloction .timeChange .timeChange-input {
      width: 30%;
      display: inline-block;
    }

   .financial-alloction .radioGap{
      margin-top:10px;
   }
   .financial-alloction .bed{
     position:absolute;
     top:50%;
     left:50%;
     transform:translateX(-50%);
     box-shadow:0 1px 3px rgba(0,0,0,0.3);
     background-color:#fff;
     width:500px;
     height:auto;
     margin-top:-200px;
     border-radius:5px;
     z-index:10;
     overflow: auto;
   }
  .financial-alloction .feeTypeBox{
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    background-color:#fff;
    width:500px;
    height:auto;
    margin-top:-280px;
    border-radius:5px;
    z-index:10;
    overflow: auto;
  }
</style>
